<template>
  <div class="blog-list-container" ref="container" v-loading="isLoading">
    <ul>
      <li v-for="item in data.rows" :key="item.id">
        <div class="thumb" v-if="item.thumb">
          <router-link :to="{ name: 'BlogDetail', params: {
            id: item.id
          }
          }">
            <img :src="item.thumb" :alt="item.title" :title="item.title" />
          </router-link>
        </div>
        <div class="main">
          <router-link :to="{ name: 'BlogDetail', params: {id:item.id} }">
            <h2>{{ item.title }}</h2>
          </router-link>
          <div class="aside">
            <span>日期：{{ formatDate(item.createDate) }}</span>
            <span>浏览：{{ item.scanNumber }}</span>
            <span>评论：{{ item.commentNumber }}</span>
            <router-link :to="{
                name: 'BlogCate',
                params: {
                  categoryid: item.category.id
                }
            }" class="">{{ item.category.name }}</router-link>
          </div>
          <div class="desc">
            {{ item.description }}
          </div>
        </div>
      </li>
    </ul>
    <!-- 分页放到这里 -->
    <Pager v-if="data.total" :current="routeInfo.page" :total="data.total" :limit="routeInfo.limit" :visibleNumber="10"
      @page-change="handlePageChange" />
  </div>
</template>

<script>
import fetchData from '@/mixins/fetchData.js';
import { getBlogs } from '@/api/blog.js'
import {formatDate} from '@/utils'
import Pager from "@/components/Pager"
export default {
  components: {
    Pager
  },
  watch: {
    async $route() {
      this.isLoading = true
      this.$refs.container.scrollTop = 0
      this.data = await this.fetchData()
      this.isLoading = false
    }
  },
  mixins: [fetchData({})],
  methods: {
    formatDate,
    async fetchData() {
      return await getBlogs(this.routeInfo.page, this.routeInfo.limit, this.routeInfo.categoryid)
    },
    handlePageChange(newVal) {
      const query = {
        page: newVal,
        limit: this.routeInfo.limit
      }

      if (this.routeInfo.categoryid === -1) {
        this.$router.push({
          name: 'Blog',
          query
        })
      } else {
        this.$router.push({
          name: 'BlogCate',
          query,
          params: {
            categoryid: this.routeInfo.categoryid
          }
        })
      }
    }
  },
  computed: {
    routeInfo() {
      const limit = +this.$route.query.limit || 10
      const page = +this.$route.query.page || 1
      const categoryid = +this.$route.params.categoryid || -1
      return {
        limit,
        page,
        categoryid
      }
    }
  }
}
</script>

<style scoped lang="less">
@import "~@/styles/var.less";

.blog-list-container {
  line-height: 1.7;
  position: relative;
  padding: 20px;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    transition: all 300ms;
  }

  &::-webkit-scrollbar-track {
    background: @cyber;
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  }

  &::-webkit-scrollbar-thumb {
    // background: linear-gradient(@, darken(@white, 1%));
    background: @white;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  }

  &::-webkit-scrollbar-corner {
    background: #f1f1f1;
  }
        
}

li {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid @gray;

  .thumb {
    flex: 0 0 auto;
    margin-right: 15px;

    img {
      display: block;
      max-width: 200px;
      border-radius: 5px;
    }
  }

  .main {
    flex: 1 1 auto;

    h2 {
      margin: 0;
    }
  }

  .aside {
    font-size: 18px;
    color: @gray;

    span {
      margin-right: 15px;
    }
  }

  .desc {
    margin: 15px 0;
    font-size: 16px;
  }
}
</style>